<template>
  <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
      <div id="offCanvasSideScroll" class="mui-scroll-wrapper" ref="offCanvasSideScroll">
        <div class="mui-scroll mui-scroll-hidden">
          <div class="carHeader">
            <img :src="carUrl" />
            <span class="carHeader-title">{{this.carName}}</span>
          </div>
          <p class="subtitle">{{this.carName}}</p>
          <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted scroll" ref="ul">
            <li class="mui-table-view-cell" v-for="(item,key) in carInfo" :key="key">
              <router-link to="/home/addCar/carSelectCc" class="mui-navigate-right">{{key}}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </aside>
    <div class="mui-inner-wrap">
      <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
          <!-- 汽车搜索车名部分 -->
          <div>
            <div class="search">
              <input v-model="keyword" class="search-input" type="text" placeholder="请输入车名(如：奥迪)" />
            </div>
            <div class="search-content" ref="search" v-show="keyword">
              <li class="search-item border-bottom" v-for="item in list" :key="item">
                <img :src="carsImg[item].url" alt />
                <span class="search-item-carname">{{item}}</span>
              </li>
              <li class="search-item border-bottom" v-show="hasNoDate">没有找到匹配数据</li>
            </div>
          </div>
          <!-- 汽车品牌列表部分 -->
          <div class="list" ref="wrapper">
            <div class="area">
              <div class="title border-topbottom">热门品牌</div>
              <div class="button-list">
                <div class="button-wrapper" v-for="item in hot" :key="item.id">
                  <div class="button">{{item.name}}</div>
                </div>
              </div>
              <!-- 汽车品牌列表部分 -->
              <!-- <img :src="item.url" class="area" v-for="(item,key) in carsImg" :key="key" /> -->
              <div class="area" v-for="(item,key) in cities" :key="key" ref="key">
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list">
                  <!-- <img :src="innetItem.url" /> -->
                  <div
                    class="item border-bottom"
                    v-for="(innerItem,key) in item"
                    :key="key"
                    @click="offCanvasShow(key)"
                  >
                    <img :src="carsImg[key].url" />
                    {{key}}
                  </div>
                </div>
              </div>
            </div>
            <!-- 热门汽车品牌部分 -->
          </div>
        </div>
      </div>
      <!-- off-canvas backdrop -->
      <div class="mui-off-canvas-backdrop"></div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
//导入定位组件
import { mapState, mapMutations } from "vuex";

import mui from "../../../lib/mui/js/mui.min.js";

export default {
  name: "CityList",
  computed: {
    ...mapState({
      currentCity: "city"
    }),
    ...mapState({
      currentCity1: "city1"
    }),
    hasNoDate() {
      return !this.list.length;
    }
  },
  data() {
    return {
      keyword: "",
      list: [],
      timer: null,
      carInfo: {},
      carName: "",
      carUrl: "",
      carCc: ""
    };
  },
  mounted() {
    mui.init({
      swipeBack: false
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui("#offCanvasWrapper");
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector(".mui-inner-wrap");
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    var moveTogether = false;
    // document
    //   .getElementById("offCanvasShow")
    //   .addEventListener("tap", function() {
    //     offCanvasWrapper.offCanvas("show");
    //   });
    var that = this;
    var carInfo1 = {};
    this.$refs.ul.addEventListener("tap", function(e) {
      that.carCc = e.target.innerText;
      //console.log(that.carInfo[e.target.innerText]);
      //传递一个新的对象到state  方便选择 车辆 排量及年份使用
      carInfo1 = {
        name: that.carName,
        carCc: e.target.innerText,
        displacements: that.carInfo[e.target.innerText],
        url: that.carsImg[that.carName].url,
        displacement: "",
        year: "",
        carId: []
      };
      //console.log(carInfo1);
      that.$router.push("/home/addCar/carSelectCc");
      that.$store.commit("getCarInfo", carInfo1);
      // that.$store.commit("getCarInfo", that.carInfo[e.target.innerText]);
    });
    // this.$refs.wrapper1.addEventListener("tap", function(e) {
    //   console.log(e.target.innerText);
    //   this.carName = e.target.innerText;
    //   offCanvasWrapper.offCanvas("show");
    // });
    //阻止手动显示侧滑菜单;
    document
      .getElementsByClassName("mui-inner-wrap")[0]
      .addEventListener("drag", function(event) {
        event.stopPropagation();
      });
    //阻止手动关闭侧滑菜单;
    document
      .getElementsByClassName("mui-off-canvas-right")[0]
      .addEventListener("drag", function(event) {
        event.stopPropagation();
      });
    //主界面和侧滑菜单界面均支持区域滚动；
    mui("#offCanvasSideScroll").scroll();
    mui("#offCanvasContentScroll").scroll();
    //实现ios平台的侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
      offCanvasWrapper[0].addEventListener("shown", function(e) {
        //菜单显示完成事件
        plus.webview.currentWebview().setStyle({
          popGesture: "none"
        });
      });
      offCanvasWrapper[0].addEventListener("hidden", function(e) {
        //菜单关闭完成事件
        plus.webview.currentWebview().setStyle({
          popGesture: "close"
        });
      });
    }
  },
  activated() {
    //this.listen();
    //this.scroll = new BScroll(this.$refs.ul, { click: true });
    this.scroll = new BScroll(this.$refs.search, { click: true });
    this.scroll = new BScroll(this.$refs.wrapper, { click: true });

    //this.scroll = new BScroll(this.$refs.offCanvasSideScroll, { click: true });
    // this.scroll = new BScroll(this.$refs.offCanvasContentScroll, {
    //   click: true
    // });
  },
  methods: {
    offCanvasShow(key) {
      this.carName = key;
      this.carUrl = this.carsImg[this.carName].url;
      for (let i in this.cities) {
        if (this.cities[i][key] !== undefined) {
          this.carInfo = this.cities[i][key];
        }
      }
      var offCanvasWrapper = mui("#offCanvasWrapper");
      offCanvasWrapper.offCanvas("show");
      // this.$store.commit("clearChangeCarInfo");
    }
  },
  props: ["hot", "cities", "letter", "carsImg"],
  watch: {
    // letter : function(newVal){
    //   const element = this.$refs[newVal];
    //   this.scroll.scrollToElement(element);
    // }
    letter() {
      if (this.letter) {
        const element = this.$refs[this.letter][0];
        // console.log(element);
        // console.log(this);
        //console.log([this.letter]);
        //console.log([this.letter][0]);
        this.scroll.scrollToElement(element);
      }
    },
    keyword() {
      //console.log(this.keyword);
      //console.log(this.timer);
      if (this.timer) {
        //console.log(this.keyword);
        clearTimeout(this.timer);
      }
      if (!this.keyword) {
        this.list = [];
        //console.log(!this.keyword);
        return;
      }
      this.timer = setTimeout(() => {
        //console.log(this.keyword + "---");
        //console.log(this.cities);
        const result = [];
        for (let i in this.cities) {
          for (let n in this.cities[i]) {
            //console.log(n);
            if (n.indexOf(this.keyword) > -1) {
              result.push(n);
            }
          }
          // this.cities[i].forEach(value => {
          //   console.log(value.name);
          //   if (
          //     value.spell.indexOf(this.keyword) > -1 ||
          //     value.name.indexOf(this.keyword) > -1
          //   ) {
          //     result.push(value);
          //   }
          // });
        }
        this.list = result;
      }, 100);
    }
  }
};
</script>
<style lang="scss" scoped>
.scroll {
  overflow: scroll;
}
//汽车品牌搜索部分样式
.search {
  //   //   width: 100%;
  //   height: 80px;
  //   //   padding-top: 80px;
  //   background: lightblue;
  height: 45px;
  line-height: 45px;
  vertical-align: middle;
  text-align: center;
  img {
    display: inline-block;
  }
  .search-input {
    width: 343px;
    height: 28.5px;
    font-size: 13px;
    //text-align: center;
    border-radius: 5px;
    color: #666666;
  }
}
.search-content {
  z-index: 1;
  height: 623px;
  //   position: absolute;
  //   overflow: hidden;
  //top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  position: relative;
  .search-item {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    // padding-left: 5px;
    background: #ffffff;
    list-style: none;
    font-size: 0;
    .search-item-carname {
      font-size: 14px;
      color: #333333;
      vertical-align: middle;
    }
    img {
      width: 27px;
      height: 27px;
      vertical-align: middle;
      margin: 0 16px;
    }
  }
}
// 汽车品牌列表部分样式
.border-topbottom {
  &:before {
    border-color: #ccc;
  }

  &:after {
    border-color: #ccc;
  }
}
.border-bottom {
  &:before {
    border-color: #ccc;
  }
}
.list {
  overflow: scroll;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  .title {
    line-height: 14px;
    background: #f3f3f3;
    left: 5%;
    position: relative;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0 8px 0;
  }

  .button-list {
    box-sizing: border-box;
    // padding: 10px;
    overflow: hidden;
    position: relative;
    left: 5%;
    width: 90%;

    .button-wrapper {
      float: left;
      width: 33.33%;
      padding: 5px;

      .button,
      .autolocation {
        // margin: 5px;
        // margin-right: 5px;
        padding: 5px 0;
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
        font-size: 15px;
      }
      .location {
        color: red;
      }
    }
  }

  .item-list {
    background-color: #fff;
  }

  .item {
    line-height: 40px;
    width: 90%;
    left: 5%;
    position: relative;
    font-size: 15px;
  }
  img {
    width: 27px;
    //margin: 16px 0;
    position: relative;
    top: 7.5px;
    margin-right: 16px;
  }
}

//侧滑部分css样式
* {
  touch-action: pan-y;
  // padding: 0;
  // margin: 0;
}
#offCanvasWrapper {
  height: 634px;
  .mui-scroll {
    height: 100%;
  }
}
.mui-scroll-wrapper {
  background-color: #f3f3f3;
  .mui-scroll-hidden {
    background-color: #ffffff;
  }
  .mui-scroll {
    //background-color: #ffffff;
    .carHeader {
      height: 59px;
      line-height: 59px;
      margin-left: 16px;
      font-size: 0;
      .carHeader-title {
        font-size: 14px;
        vertical-align: middle;
      }
      img {
        width: 27px;
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    .subtitle {
      height: 28px;
      line-height: 28px;
      background-color: #f0f0f0;
      font-size: 13px;
      padding-left: 16px;
      color: #333333;
      margin: 0;
    }
    a {
      font-size: 14px;
      color: #333333;
    }
    .mui-table-view-inverted {
      background-color: #ffffff;
    }
    .mui-table-view-inverted .mui-table-view-cell:after {
      background-color: #d8d8d8;
    }
    .mui-navigate-right:after,
    .mui-push-left:after,
    .mui-push-right:after {
      display: none;
    }
    .mui-navigate-right {
      color: #333333;
    }
    .mui-table-view-cell > a:not(.mui-btn).mui-active {
      background-color: #fff;
    }
    .mui-table-view-inverted:after {
      background-color: #d8d8d8;
    }
    .mui-table-view-inverted:before {
      height: 0;
    }
  }
}
</style>